<template>
  <div class="home">
    <div class="card">
      <h1>非在职信息查询</h1>
      <van-form class="form" label-width="60px" @submit="onSubmit">
        <van-field
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
        />
        <van-field
          v-model="idCard"
          type="password"
          name="身份证号"
          label="身份证号"
          placeholder="请输入身份证号"
        />
        <div style="margin: 50px 16px 30px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      username: '',
      idCard: ''
    }
  },
  methods: {
    onSubmit () {
      console.log(this.username, this.idCard)
    }
  }
}
</script>
<style lang="less">
.home {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background: #f5f9fd;

  .card {
    min-height: 200px;
    margin-top: 50px;
    background: #fff;
    padding-bottom: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    h1 {
      color: #508df7;
      height: 30px;
      line-height: 30px;
      padding-top: 30px;
    }

    .form {
      margin-top: 50px;

      .van-field {
        margin-top: 20px;
      }
    }
  }
}
  
</style>
